<template>
  <div class="car">
    <div class="top">
      <Top title="购物车">
        <div style="font-size: 4vw" @click="edit">
          {{ editText }}
        </div>
      </Top>
    </div>

    <div class="middle">
      <div class="title">商品</div>
      <van-empty
        v-if="carData.length == 0"
        description="购物车没商品~请添加商品"
      />
      <div class="goodslist" v-for="(item, index) in carData" :key="index">
        <van-checkbox
          v-model="item.isChecked"
          @click="smallChooses(item.id, item.isChecked)"
        ></van-checkbox>
        <div class="photo">
          <img :src="item.goods_imgUrl" alt="" />
        </div>
        <div class="goodsName">
          <div>{{ item.goods_name }}</div>
          <div class="price">¥{{ item.goods_price }}</div>
        </div>
        <div>
          <!-- @click="delCart([item.id, index])" -->
          <span
            class="iconfont icon-shanchu"
            v-show="editText == '完成'"
            
             @click="delCart1([item.id, index])"
          ></span>
          <van-stepper
            @change="changeNum(item.goods_num, item.id)"
            v-model="item.goods_num"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-submit-bar
        v-if="carData.length != 0 && editText != '完成'"
        class="submit"
        :price="tatolPrice"
        button-text="去结算"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allChecked" @click="allChooses"
          >全选</van-checkbox
        >
      </van-submit-bar>
      <tarbar></tarbar>
    </div>
  </div>
</template>

<script>
import tarbar from "../components/common/tarbar";
import Top from "@/views/login/top";
import BetterScroll from "better-scroll";
import { getCartData, changeCartNum, addOrder } from "@/common/api/cart";
import { mapMutations, mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      allChecked: true,
      value: 1,
      editText: "编辑",
      newArr: [],
    };
  },
  components: {
    tarbar,
    Top,
  },
  methods: {
    ...mapActions(["delCart"]),
    ...mapMutations(["getCart", "setOrderId"]),

    edit() {
      this.editText = this.editText == "编辑" ? "完成" : "编辑";
    },
    delCart1(parmas){
        this.delCart(parmas).then(res=>{
           
        })
       
    },
    // 去结算
    onSubmit() {
      // 生成订单
      let newList = [];
      this.carData.forEach((item) => {
        this.newArr.forEach((v) => {
          if (v == item.id) {
            newList.push(item);
          }
        });
      });
    
      addOrder(newList).then((res) => {
        let orderId = res.data.data.data[0].order_id;
        // 储存订单号
        this.setOrderId(orderId);
        if (this.tatolPrice > 0) {
          return this.$router.push({
            name: "order",
            query: {
              tatolPrice: this.tatolPrice / 100,
              id: JSON.stringify(this.newArr),
            },
          });
        }
      });
    },
    // 全选按钮
    allChooses() {
      this.carData.forEach((item) => {
        item.isChecked = this.allChecked;
      });
    },
    // 是否全选
    smallChooses(id, isChecked) {
      if (isChecked) {
        this.newArr.push(id);
      } else {
        let index = this.newArr.indexOf(id);
        this.newArr.splice(index, 1);
      }

      let o = this.carData.every((item) => {
        return item.isChecked;
      });
      this.allChecked = o;
    },
    // 改变商品数量
    async changeNum(num, id) {
      // 发起修改数量请求
      let res = await changeCartNum(num, id);
    },
  },
  mounted() {
    // 发起请求获取购物车数据
    getCartData().then((res) => {
      res.data.data.data.forEach((item) => {
        this.newArr.push(item.id);
        item.isChecked = true;
      });
      // 传给vuex
      this.getCart(res.data.data.data);
    });

    // 生成背景颜色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5");
  },
  computed: {
    ...mapState({
      carData: (state) => state.cart.cartData,
    }),
    tatolPrice() {
      let price = 0;
      this.carData.forEach((item) => {
        if (item.isChecked) {
          price += item.goods_price * item.goods_num;
        }
      });
      return price * 100;
    },
  },
  beforeCreate() {},
  beforeDestroy() {
    //  清除背景色
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang='scss' scoped>
.submit {
  position: relative;
}

.car {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .middle {
    flex: 1;
    overflow: scroll;
    .title {
      padding: 0.3415rem;
      font-size: 0.5854rem;
    }
    .goodslist {
      margin-bottom: 2vw;
      font-size: 0.439rem;
      padding: 0 0.3415rem;
      display: flex;
      align-items: center;
      background-color: white;
      justify-content: space-between;
      .goodsName {
        font-size: 0.35rem;
        padding: 3vw 3vw;
        width: 4.078rem;
        .price {
          color: #b0352f;
        }
      }
      .photo {
        img {
          width: 100%;
          height: 100%;
        }
        margin: 0.5415rem 0;
        width: 12vw;
        height: 12vw;
        background-color: green;
      }
    }
  }
}
</style>